body {
    margin: 0;
}

img {
    display: block;
}

.container {
    width: 1920px;
    height: 1080px;
    background-image: url('../imgs/bg.jpg');
    transform-origin: left top;
    position: relative;
}

.header {
    position: absolute;
    z-index: -1;
}

.container>div {
    position: absolute;
    outline: 1px solid red;
    box-sizing: border-box;
    padding: 25px 38px;
}

.container>div .title {
    color: white;
    margin: 0;
}

.container>div .chart {
    height: calc(100% - 37px);
    /* outline: 1px solid white; */
    margin-top: 8px;
}

.device-wrapper {
    height: 116px;
    width: 479px;
    top: 90px;
    left: 20px;
}

.monitor-wrapper {
    height: 504px;
    width: 479px;
    top: 224px;
    left: 20px;
}

/* BFC */
/* .monitor-wrapper .title {
    overflow: hidden;
} */

/* 清除浮动5句话 */
.monitor-wrapper .title::after,
.total-wrapper .title::after {
    content: '';
    display: block;
    clear: both;
    /* 隐藏元素 */
    visibility: hidden;
    height: 0;
}

.monitor-wrapper h3,
.total-wrapper h3 {
    width: auto;
    color: white;
    float: left;
    margin: 0;
}

.monitor-wrapper h3.active,
.total-wrapper h3.active {
    color: tomato;
}

.monitor-wrapper .divider,
.total-wrapper .divider {
    margin: 0 8px;
}

.monitor-wrapper .header {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, .15);
    height: 40px;
}

.monitor-wrapper .inner {
    width: calc(100% - 76px);
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    line-height: 40px;
    color: tomato;
}

.monitor-wrapper .list {
    width: 100%;
    height: calc(100% - 112px);
    position: absolute;
    top: 98px;
    left: 0;
    outline: 1px solid white;
    overflow: hidden;
}

.monitor-wrapper .list .item {
    color: #fff;
    /* height: 10%; */
    height: 39px;
    display: flex;
    align-items: center;
    transition: transform 1s ease;
}

.monitor-wrapper .item:hover {
    background: rgba(255, 255, 255, .1);
}

.monitor-wrapper .item .inner {
    color: thistle;
}

.dist-wrapper {
    height: 297px;
    width: 479px;
    top: 748px;
    left: 20px;
}

.dist-wrapper .chart {
    width: 252px;
}

.total-wrapper {
    height: 158px;
    width: 479px;
    top: 90px;
    right: 20px;
}

.total-wrapper .data {
    display: grid;
    height: calc(100% - 6px);
    /* 2 * 2 布局 */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    color: white;
    font-size: 32px;
    font-weight: 600;
}

.total-wrapper .data>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.total-wrapper .data>div:nth-child(3),
.total-wrapper .data>div:nth-child(4) {
    font-weight: normal;
    font-size: 20px;
}

.sale-count-wrapper {
    height: 260px;
    width: 479px;
    top: 268px;
    right: 20px;
}

.sale-count-wrapper .chart {
    width: 100%;
    outline: 1px solid white;
}

.sale-count-wrapper button.active {
    background: red;
}

.channel-wrapper {
    height: 244px;
    width: 230px;
    top: 548px;
    right: 270px;
}

.channel-wrapper .chart {
    width: 100%;
    position: absolute;
    left: 0;
    height: calc(100% - 60px) !important;
}

.process-wrapper {
    height: 244px;
    width: 230px;
    top: 548px;
    right: 20px;
}

.rank-wrapper {
    height: 235px;
    width: 479px;
    top: 810px;
    right: 20px;
}

.rank-wrapper .chart {
    outline: 1px solid white;
    /* height: 235px;
    width: 479px;
    top: 810px;
    right: 20px; */
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rank-wrapper .nav,
.rank-wrapper .intro {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rank-wrapper .nav .item,
.rank-wrapper .intro .item {
    color: #fff;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-wrapper .nav .item.active,
.rank-wrapper .intro {
    background-color: rgba(255, 255, 255, .5);
}

.rank-wrapper .intro .item {
    color: skyblue;
}